import { Component } from 'vue-facing-decorator'
import Render from '@/render/Render'
import toNative from '@/utils/toNative'
import TableRender, { type TableRenderColumnTypes } from '@/render/TableRender'
import { Button, Input } from 'ant-design-vue'
import { SearchOutlined } from '@ant-design/icons-vue'
import TipsIcon from '@/assets/channel-management/tips-icon.png'
import AddInsuranceCompany from './components/AddInsuranceCompany'
import router from '@/router'
import { getInsCompany } from '@/api/insCompany/index'
import type { AnyObject } from '@/types'
import type { InsuranceCompanyDto } from '@/api/insCompany/types'
import { InsuranceInvokeTypeEnum, InsureTypeCnEnum } from '@/const/enum'
import { shake } from '@/utils/util'
@Component
export class ChannelManagementSuperintendentManagement extends TableRender {
    showAddInsurance = false

    searchValue = ''

    tableColumnConfig() {
        return [
            {
                field: 'code',
                title: '保司编码',
                params: {
                    path: (row) => `/insurance-manage/insurance-company/${row.id}`,
                    permission: 'client:insurance-manage-company:detail'
                },
                slots: {
                    default: 'toNext'
                }
            },
            {
                field: 'fileUrl',
                title: '保司logo',
                params: {
                    width: 40,
                    height: 40
                },
                slots: {
                    default: 'image'
                }
            },
            {
                field: 'name',
                title: '保司名称'
            },
            {
                field: 'insureType',
                title: '保险产品',
                params: {
                    enum: InsureTypeCnEnum
                },
                slots: {
                    default: 'enum'
                }
            },
            // {
            //     field: 'companyName',
            //     title: '渠道来源',
            // },
            {
                field: 'ruleName',
                title: '推送规则'
            },
            {
                field: 'invokeType',
                title: '数据对接',
                params: {
                    enum: InsuranceInvokeTypeEnum
                },
                slots: {
                    default: 'enum'
                }
            },
            {
                field: 'createUserName',
                title: '创建人'
            },
            {
                field: 'createTime',
                title: '创建时间',
                width: 160
            },
            {
                field: 'enable',
                title: '状态',
                formatter: ({ row }) => {
                    return row.enable ? '启用' : '禁用'
                }
            }
        ] as TableRenderColumnTypes<InsuranceCompanyDto>
    }

    handleSearch() {
        shake(() => {
            this.reloadPage()
        })
    }

    onOpenAddPop() {
        // this.showAddInsurance = true
        // console.log(this.showAddInsurance, '点击了')
        // 底层架子 弹窗表单有点问题
        console.log('点击了')
        this.$router.push({
            path: '/insurance-manage/insurance-company-add'
        })
    }
    // 去详情
    onGoDetail() {
        console.log(router, 'routerrouter')
        // router.push('/channel-management/channel-management-superintendent-management/200')
        this.$router.push({
            path: '/insurance-manage/insurance-company/200'
        })
    }

    onLoadData(page: number, size: number, filters: AnyObject) {
        return getInsCompany({
            pageNum: page,
            pageSize: size,
            name: this.searchValue
        })
    }

    renderTitle() {
        return (
            <div class="flex justify-between items-center">
                <div class="page-title" onClick={this.onGoDetail}>
                    保司管理
                </div>
                <div class="flex items-center pr-16">
                    <div class="w-300">
                        <Input
                            v-model:value={this.searchValue}
                            placeholder="只能搜索保司ID和保司名称"
                            onChange={this.handleSearch}
                            v-slots={{
                                prepend: () => {
                                    return <SearchOutlined />
                                }
                            }}
                        ></Input>
                    </div>
                    <div class="ml-8">
                        <Button type="primary" onClick={this.onOpenAddPop}>
                            新增保司
                        </Button>
                    </div>
                </div>
            </div>
        )
    }

    renderTips() {
        return (
            <div class="mt-8 px-8">
                <div class="px-16 py-12 flex bg-[#FFA814] bg-opacity-10 rounded-default">
                    <img src={TipsIcon} class="w-24 h-24 mr-4" alt="" />
                    <div class="flex items-start ">
                        <div class="text-black-light-100 text-base">
                            添加新的保司前请 <span class="font-bold text-black-light-200">【</span>{' '}
                            注意以下事项 <span class="font-bold text-black-light-200">】</span>：
                        </div>
                        <div class="text-black-light-100 text-base">
                            <div>
                                1、请先前往{' '}
                                <span class="font-bold text-black-light-200"> 保险-保险规则 </span>
                                添加您的
                                <span class="font-bold text-black-light-200"> 保司规则 </span>
                                <span class="text-blue-light-400"> 点击前往；</span>
                            </div>
                            <div>
                                2、如有{' '}
                                <span class="font-bold text-black-light-200"> 新的渠道 </span>{' '}
                                请前往
                                <span class="font-bold text-black-light-200">
                                    {' '}
                                    渠道管理-渠道保司{' '}
                                </span>{' '}
                                添加，如该渠道需
                                <span class="font-bold text-black-light-200">
                                    {' '}
                                    APl数据对接{' '}
                                </span>{' '}
                                请在{' '}
                                <span class="font-bold text-black-light-200">
                                    {' '}
                                    渠道系统-渠道保司-接口配置{' '}
                                </span>{' '}
                                添加配置
                                <span class="text-blue-light-400"> 点击前往</span>;
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
    render() {
        return (
            <div class="flex flex-col h-full overflow-hidden">
                {this.renderTitle()}
                {/* {this.renderTips()} */}
                {this.renderTable()}
                {this.renderPager()}
                {<AddInsuranceCompany v-model:show={this.showAddInsurance} />}
            </div>
        )
    }
}

export default toNative<{}, {}>(ChannelManagementSuperintendentManagement)
